<template>
  <div class="search">
    <div class="search-header">
      <van-icon name="arrow-left" @click="goback" />
      <van-search
        show-action
        v-model="value"
        placeholder="你在找什么？"
        shape="round"
      >
        <template #action>
          <div @click="onSearch(value)">搜索</div>
        </template>
      </van-search>
    </div>
    <van-divider />
    <div class="search-main">
      <p v-if="shownolist"><van-empty description="没有找到相关商品" /></p>
      <ul class="search-list" v-if="showlist">
        <li v-for="item in newlist" :key="item._id">
          <router-link :to="{ name: 'Detail', params: { id: item._id } }">
            {{ item.name }}
          </router-link>
        </li>
        <van-divider />
      </ul>
      <div class="hot-search">
        <h3>热门搜索</h3>
        <div class="hot-searchcon">
          <p @click="hotSearch('口红')">口红</p>
          <p @click="hotSearch('智能手表')">智能手表</p>
          <p @click="hotSearch('耳机')">耳机</p>
          <p @click="hotSearch('电视')">电视</p>
        </div>
      </div>
      <van-divider />
      <div class="hot-search">
        <h3>热门系列</h3>
        <div class="hot-searchcon">
          <p @click="hotSearch('TOM FORD')">TOM FORD</p>
          <p @click="hotSearch('Dior')">Dior</p>
          <p @click="hotSearch('Apple')">Apple</p>
          <p @click="hotSearch('小米')">小米</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllProductsAPI } from "../../api/products";
import { Toast } from "vant";
export default {
  data() {
    return {
      searchlist: [],
      newlist: [],
      showlist: false,
      shownolist: false,
      value: "",
      timer: null,
    };
  },
  // 防抖
  watch: {
    value: {
      handler(value) {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          this.search(value);
        }, 500);
      },
      deep: true,
    },
  },
  methods: {
    // 点击搜索按钮触发事件
    onSearch(value) {
      if (value === "") {
        this.showlist = false;
        this.shownolist = false;
        Toast.fail("输入内容不能为空");
      } else {
        localStorage.removeItem("searchlist");
        localStorage.setItem("searchlist", JSON.stringify(this.newlist));
        this.$router.push("/searchlist");
      }
    },
    // 输入框输入内容触发事件
    async search(value) {
      if (value === "") {
        this.showlist = false;
        this.shownolist = false;
      } else {
        const res = await getAllProductsAPI({ name: value });
        console.log(res);
        this.searchlist = res.searchdata;
        this.newlist = this.searchlist.filter((item) =>
          item.name.includes(value)
        );
        if (this.newlist.length <= 0) {
          this.showlist = false;
          this.shownolist = true;
        } else {
          this.shownolist = false;
          this.showlist = true;
        }
      }
    },
    // 点击热门搜索触发事件
    async hotSearch(value) {
      const res = await getAllProductsAPI({ name: value });
      console.log(res);
      this.searchlist = res.searchdata;
      this.newlist = this.searchlist.filter((item) =>
        item.name.includes(value)
      );
      localStorage.removeItem("searchlist");
      localStorage.setItem("searchlist", JSON.stringify(this.newlist));
      this.$router.push("/searchlist");
    },
    // 返回
    goback() {
      this.$router.go(-1);
    },
  },
  created() {},
};
</script>

<style>
.search {
  padding: 0 20px;
}
.search .search-header {
  display: flex;
  align-items: center;
}
.search .van-search {
  flex: 1;
}
.search .hot-search {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 125px;
}
.search .hot-search h3 {
  font-size: 14px;
  font-weight: bolder;
}
.search .hot-searchcon p {
  float: left;
  padding: 5px 10px;
  border-radius: 20px;
  background-color: #eee;
  margin-right: 15px;
  font-size: 14px;
}
.search .search-list {
  padding: 20px 0;
}
.search .search-list li a {
  color: #333;
  line-height: 2;
}
</style>
